<div class="query">
  <div class="query-nav clearfix">
    <div class="collection-info pull-left">
      <ul>
        <li>
          <i class="fa fa-database"></i> {{ ::databaseName }}
        </li>
        <li ng-show="queryTime">
          <i class="fa fa-clock-o"></i> {{ queryTime }} ms.
        </li>
        <li>
          {{ result.length }} Count
        </li>
      </ul>
    </div>
    <div class="right-btns">
      <div class="query-btn-list btn-group clearfix">
        <button type="button" class="search-btn btn btn-primary btn-sm pull-left" ng-click="evaluateExpression()">Run</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-sm" ng-click="currentView = VIEWS.RAW" ng-class="{ active : currentView === VIEWS.RAW }" uib-tooltip="Raw View" tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true">
          <i class="fa fa-code"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm" ng-disabled="!resultMongoMethodName || resultMongoMethodName === 'count'" ng-click="changeCurrentView(VIEWS.TEXT, $event)" ng-class="{ active : currentView === VIEWS.TEXT }" uib-tooltip="Text View"
          tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true">
          <i class="fa fa-file-text-o"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm" ng-disabled="!resultMongoMethodName || resultMongoMethodName === 'count'" ng-click="changeCurrentView(VIEWS.KEYVALUE, $event)" ng-class="{ active : currentView === VIEWS.KEYVALUE }" uib-tooltip="Key Value View"
          tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true">
          <i class="fa fa-bars"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm" ng-disabled="!resultMongoMethodName || resultMongoMethodName === 'count'" ng-click="changeCurrentView(VIEWS.TABLE, $event)" ng-class="{ active : currentView === VIEWS.TABLE }" uib-tooltip="Table View"
          tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true">
          <i class="fa fa-table"></i>
        </button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-sm" ng-click="collapseAll()" ng-disabled="currentView !== VIEWS.KEYVALUE" uib-tooltip="Collapse All" tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true">
          <i class="fa fa-compress"></i>
        </button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-sm" ng-click="exportResults()" uib-tooltip="Export Results" tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-append-to-body="true" ng-disabled="!result.length">
          <i class="fa fa-external-link-square"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="query-content">
    <form class="query-form" name="query-form" novalidate>
      <div class="query-input">
        <div class="query-editor" codemirror="codeEditorOptions" handle="editorHandle" custom-data="codeEditorCustomData" has-focus="editorHasFocus" ng-model="form.expression">
        </div>
      </div>
    </form>
    <div class="query-results">
      <div class="query-results-inner">
        <loading loading="loading"></loading>
        <div class="query-error alert alert-danger" ng-show="!loading && error" ng-bind-html="error">
        </div>
        <div ng-show="(!loading && !error && result.length)">
          <div class="query-results" ng-if="currentView === VIEWS.RAW && !loading">
            <div class="raw-view">
              <pre>{{ ::result | json }}</pre>
            </div>
          </div>
          <div class="query-results" ng-if="currentView === VIEWS.TEXT && !loading">
            <div class="text-view query-results-list">
              <div class="results-list">
                <div class="result" ng-repeat="result in result">
                  <ul class="menu">
                    <li>
                      <button class="btn btn-default" ng-click="deleteDocument(result)">
                        <i class="fa fa-plus rotate-45"></i>
                      </button>
                    </li>
                  </ul>
                  <pre>{{ ::result | json }}</pre>
                </div>
              </div>
            </div>
          </div>
          <div class="query-results" ng-if="currentView === VIEWS.KEYVALUE && !loading">
            <div class="key-value-view query-results-list">
              <div class="top-header clearfix">
                <span class="table-cell col-sm-3 key">
                  Key
                </span>
                <span class="table-cell col-sm-6 key">
                  Value
                </span>
                <span class="table-cell col-sm-3 key">
                  Type
                </span>
              </div>
              <div class="result-list">
                <div class="result" ng-repeat="result in keyValueResults" ng-right-click="openDocumentContextMenu(result)">
                  <ul class="menu">
                    <li>
                      <button class="btn btn-default" ng-click="editDocument(result.original)">
                        <i class="fa fa-pencil"></i>
                      </button>
                    </li>
                    <li>
                      <button class="btn btn-default" ng-click="deleteDocument(result.original)">
                        <i class="fa fa-plus rotate-45"></i>
                      </button>
                    </li>
                  </ul>
                  <key-value-result result="result" result-original="result.original"></key-value-result>
                </div>
              </div>
            </div>
          </div>
          <div class="query-results" ng-if="currentView === VIEWS.TABLE && !loading">
            <div class="table-view">
              <table class="table table-condensed">
                <thead>
                  <tr>
                    <th ng-repeat="field in fields">{{ field }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="result-row" ng-repeat="doc in result">
                    <td class="result-cell" title="{{ doc[field] }}" ng-repeat="field in fields">{{ doc[field] }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="alert alert-info query-info" ng-show="!results || !result.length && resultMongoMethodName && currentView !== VIEWS.RAW">
          Your search did not return any results.
        </div>
      </div>
    </div>
  </div>
</div>
